<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .center {
            margin: auto;
            width: 1110px;
            height: 100vh;
            background-color: antiquewhite;
        } */
        .banner {
          margin: auto;
            position: relative;
            border: 2px solid gold;
            display: flex;
            width: 1200px;
            height: 375px;
            overflow: hidden;
        }
        .banner > img {
            width: 100%
        }
        .banner > img:first-child {
            margin-left: -1200px;
        }
        .banner > div {
            position: absolute;
            display: flex;
            justify-content: space-between;
            width: 1200px;
            top: 50%;
            transform: translateY(-50%);
        }
        .banner > div button {
          border: 0px;
          background-color: rgb(192, 235, 149);
        }
    </style>
</head>
<body>
        <div class="banner" data-index="1">
            <img src="./2021_img/hentud.png" alt="" />
      
            <img src="./2021_img/hentuc.png" alt="" />
            <img src="./2021_img/hentuaa.png" alt="" />
            <img src="./2021_img/hentub.png" alt="" />
            <img src="./2021_img/hentud.png" alt="" />
      
            <img src="./2021_img/hentuc.png" alt="" />
      
            <div>
              <button><</button>
              <button>></button>
            </div>
        </div>
    <script src="./vendor/jquery-3.6.0.min.js"></script>
    <script>
        $('.banner button:eq(1)').click(function () {
        let index = $('.banner').attr('data-index')

        index++

        $('.banner img:eq(0)').animate(
          { 'margin-left': `${-1200 * index}px` },
          function () {
            //如果是最后一张: 序号5 -> 切回1
            if (index == 5) {
              index = 1
              //直接修改 margin-left: -1200px
              $(this).css('margin-left', '-1200px')
              //清空动画序列, 防止错误切换: 例如序列中有多个切换到序号5, 结果这里瞬间到1, 序列会切换回到5
              $(this).stop(true)
            }
            $('.banner').attr('data-index', index)
          }
        )
      })
      // 每两秒触发一次 下一个 按钮的点击事件
      setInterval(() => {
        // click: 无参数, 会触发点击事件
        $('.banner button:eq(1)').click()
      }, 3000)

      $('.banner button:eq(0)').click(function () {
        let index = $('.banner').attr('data-index')
        index--
        $('.banner img:eq(0)').animate(
          { 'margin-left': `${index * -1200}px` },
          function () {
            if (index == 0) {
              index = 4
              $(this).css('margin-left', '-1200px')
              $(this).stop(true)
            }
            $('.banner').attr('data-index', index)
          }
        )
      })
    </script>
</body>
</html>